<template>
  <div>
    <!--主页-->
    <header-top @scroll="scrollTo"></header-top>
    <!--海报-->
    <img class="l-banner" :src="banner" alt="无法显示">

     <!--关于我们-->
    <div ref="about" class="l-content">
      <p class="l-title">关于我们</p>
      <p class="l-sub-title">about us</p>
      <img class="l-about-img" :src="about" alt="无法显示">
      <div class="l-describle">
        <p>东方城控股集团公司是在全域旅游的背景下，按照“发展大旅游、组建大集团、形成大产业”的战略思路，以“大众创业、天下加盟、政府主导、部门联动、市场运作”的原则，整合马来西亚旅游资源，组建的集东方文化、商业运营、旅游开发、创意体验、实景还原等为一体的大型文化旅游发展集团。
        </p>
      </div>
    </div>

    <!--团队介绍-->
    <div ref="team" class="l-content">
      <p class="l-title">团队介绍</p>
      <p class="l-sub-title">team introduction</p>
      <!--管理团队-->
      <img class="l-about-img" :src="haifo" alt="无法显示">
      <div class="l-team-content">
        <div class="l-team-title">管理团队</div>
        <p class="l-sub-team">哈佛大学商学院</p>
        <p>由世界排名第一的哈佛商学院管理团队负责集团公司战略化运营</p>
      </div>

      <!--建设团队-->
      <img class="l-about-img" :src="east" alt="无法显示">
      <div class="l-team-content">
        <div class="l-team-title">建设团队</div>
        <p class="l-sub-team">深圳东道建设集团有限公司</p>
        <p>中国对外承包工程资格(一带一路)政府重点扶持的国家高新企业。已在马来西亚开设东道建设集团有限公司</p>
      </div>

      <!--技术团队-->
      <img class="l-about-img" :src="dream" alt="无法显示">
      <div class="l-team-content">
        <div class="l-team-title">技术团队</div>
        <p class="l-sub-team">东方梦影</p>
        <p>来自世界顶尖软件开发技术人员组成的东方梦影团队，将实现“吃、住、行、游、购、娱“等要素和”商、养、学、闲、情、奇“等业态全覆盖，为东方城提供全程化、个性化智慧旅游服务</p>
      </div>
    </div>

    <!--规划进程-->
    <div ref="process" class="l-content l-progress-bg">
      <p class="l-title">规划进程</p>
      <p class="l-sub-title">planning process</p>
      <div class="l-progress-content">
        <img class="l-fish-bone" :src="fish" alt="无法显示">
        <div class="l-fish l-one">
          东方城集团与数字货币研发团队正式达成战略协议，协助后期母币DFTB开发，前期独家市场推广, DFTB中文名确定为东方通宝，私募由东方城集团负责完成，上线后自由市场交易;
        </div>

        <div class="l-fish l-one">
          东方城集团与数字货币研发团队正式达成战略协议，协助后期母币DFTB开发，前期独家市场推广, DFTB中文名确定为东方通宝，私募由东方城集团负责完成，上线后自由市场交易;
        </div>

        <div class="l-fish l-second">
          东方城集团与数字货币研发团队正式达成战略协议，协助后期母币DFTB开发，前期独家市场推广, DFTB名确定为东方通宝，私募由东方城集团负责完成，上线后自由市场交易;
        </div>

        <div class="l-fish l-third">
          东方城集团与数字货币研发团队正式达成战略协议，协助后期母币DFTB开发，前期独家市场推广, DFTB中文名确定为东方通宝，私募由东方城集团负责完成，上线后自由市场交易;
        </div>

        <div class="l-fish l-four">
          东方城集团与数字货币研发团队正式达成战略协议，协助后期母币DFTB开发，前期独家市场推广, DFTB中文名确定为东方通宝，私募由东方城集团负责完成，上线后自由市场交易;
        </div>

        <div class="l-fish l-five">
          东方城集团与数字货币研发团队正式达成战略协议，协助后期母币DFTB开发，前期独家市场推广, DFTB中文名确定为东方通宝，私募由东方城集团负责完成，上线后自由市场交易;
        </div>
      </div>
    </div>

    <!--技术概要-->
    <div ref="techincal" class="l-content">
      <p class="l-title">技术概要</p>
      <p class="l-sub-title">technical overview</p>
      <img class="l-about-img" :src="techincal" alt="无法显示">
      <div class="l-list">
        <div class="l-item">
          <img :src="dottor" alt="无法显示">
          东方通宝(DFTB)比其他区块链币更具有价值的意义在于依托于强大的线下实体经济及结算中心。如果流通二级市场，定会产生巨额的市场价值,而这些市场价值又可用来继续投资线下经济，从而产生完整闭环，继续托高东方通宝(DFTB)的价值;
        </div>

        <div class="l-item">
          <img :src="dottor" alt="无法显示">
          东方通宝(DFTB)是母币，起步之初就有实体经济支撑，涨到一定价格后又会派发出东方现金(DFC),用于真正的支付和结算，所以价格会一路走高;
        </div>

        <div class="l-item">
          <img :src="dottor" alt="无法显示">
          东方通宝平台( DFTPlatform)后期会对外开放。任何人任何企业均可在东方通宝平台( DFTPlatform).上开发自己企业的内部结算币,类似以太坊的智能合约。东方通宝平台专注于研究和发展结算、支付业务,技术团队将不断的完善各个版块的功能，将成为将区块链技术用于结算、支付行业的领军者。东方通宝和东方现金依于东方城实体经济和结算中心,将做到区块链技术的完美落地。
        </div>
      </div>
    </div>

    <!--新闻资讯-->
    <div ref="news" class="l-content l-news">
      <p class="l-title">新闻资讯</p>
      <p class="l-sub-title">news</p>

      <div class="l-list-news">
        <div v-for="item in newslist" class="l-news-item">
          <p class="l-news-header"><span class="l-news-title">{{item.title}}</span><span class="l-news-date">{{item.createTime | formdate}}</span></p>
          <p class="l-news-content">{{item.outline}}</p>
        </div>
      </div>
    </div>

    <!--脚部-->
    <div class="l-footer">
      <img class="l-footer-img" :src="logo" alt="无法显示">
      <p class="l-footer-text">Copyright  2018 DONGFANG COIN</p>
    </div>
  </div>
</template>

<script>
import headerTop from '@/components/common/HeaderTop'
import banner from '~/img/bg_m.jpg'
import about from '~/img/about.jpg'
import haifo from '~/img/haifo.jpg'
import east from '~/img/east_group.jpg'
import dream from '~/img/dream.jpg'
import fish from '~/img/fish_m.png'
import techincal from '~/img/technical.jpg'
import dottor from '~/img/dottor.png'
import logo from  "~/img/logo.png"
import api from '@/api/base'
export default {
  name: 'Index',
  data () {
    return {
      banner,
      haifo,
      about,
      east,
      dream,
      fish,
      techincal,
      dottor,
      logo,
      newslist: []
    }
  },
  components: {
    headerTop
  },
  mounted () {
     let params = this.$route.params
     if(params.target) {
       this.scrollTo(params.target)
     }

    api.get("user/penews/newsJson").then( res => {
      this.newslist =JSON.parse(res.result)
      console.log(this.newslist)
    })
  },
  methods: {
    scrollTo (target) {
      let sroll = null
      if(target.dataset.scroll) {
        if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
          sroll =  document.body
        } else {
          sroll =  document.documentElement
        }
        sroll.scrollTop = this.$refs[target.dataset.scroll].offsetTop
      }
    }
  },
  filters: {
    formdate (val) {
      let date = new Date(val)
      return date.getFullYear()+"/" + (date.getMonth() +1) + "/" + date.getDate()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.l-banner {
  width: 750px;
}

  .l-content {
    width: 680px;
    margin: auto;

    &.l-progress-bg {
      background-image: url("../../static/img/progress_m.jpg");
      color: #fff;
      padding-top: 60px;
    }

    .l-title {
      font-size: 16px; /*no*/
      text-align: center;
      margin-top: 80px;
      margin-bottom: 40px;
      position: relative;

      &:after {
        content: '';
        display: block;
        width: 30px; /*no*/
        height: 1px; /*no*/
        background-color: #e0c95d;
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .l-sub-title {
      font-size: 14px; /*no*/
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 50px;
    }

    .l-about-img {
      width: 100%;
    }

    .l-describle {
      font-size: 16px; /*no*/
      line-height: 28px; /*no*/
      text-align: center;
    }

    .l-team-title {
      font-size: 20px; /*no*/
      font-weight: bold;
      margin: 40px 0;
    }

    .l-team-content {
      font-size: 16px; /*no*/
      margin-bottom: 50px;
      .l-sub-team {
        margin-bottom: 50px;
        position: relative;

        &:after {
          display: block;
          content: '';
          position: absolute;
          bottom: -25px;
          left: 0;
          width: 70px; /*no*/
          height: 1px; /*no*/
          background-color: #986d34;
        }
      }
    }
  }

  .l-progress-content {
    padding: 0 30px;
    position: relative;
    min-height: 1108px;
    padding-bottom: 20px;
      .l-fish {
        width: 310px;
        font-size: 28px;
        position: absolute;
        box-sizing: border-box;
      }
      .l-one {
        padding-right: 20px;
        box-sizing: border-box;
        top: 0;
        left: 20px;
        padding-right: 20px;
      }

      .l-second {
        top:  200px;
        right: 20px;
        padding-left: 20px;
      }
      .l-third {
        top:  432px;
        left: 20px;
        padding-right: 20px;
      }
      .l-four {
        top:  680px;
        right: 20px;
        padding-left: 20px;
      }
      .l-five {
        top:  880px;
        left: 20px;
        padding-right: 20px;
      }



  }

  .l-fish-bone {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 1108px;
  }

  .l-list {
    .l-item {
      position: relative;
      padding-left: 60px;
      margin-bottom: 20px;
      line-height: 46px;

      img {
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }

  .l-content.l-news {
    background-color: #986d33;
    padding: 40px 20px;
    box-sizing: border-box;
    color: #fff;
    width: 100%;

    .l-news-item {
      background-color: #986d33;
      padding-top: 25px; /*no*/
      padding-bottom: 25px; /*no*/

      .l-news-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
      }

      .l-news-content {
        line-height: 48px;
        font-size: 28px;
      }
    }
    .l-news-item + .l-news-item {
      border-top: 1px solid #fff; /*no*/
    }
    .l-news-title {
      font-size: 32px;
    }

    .l-news-date {
      font-size: 14px; /*no*/
    }
  }

  .l-footer {
    background-color: #000;
    padding-bottom: 40px;

    .l-footer-img {
      display: block;
      margin: auto;
    }

    .l-footer-text {
      text-align: center;
      color: #fff;
      margin-top: 20px;
      font-size: 12px; /*no*/
      padding-bottomt: 20px;
    }
  }
</style>
